<template>
  <div>
    <home-head></home-head>
    <div class="wrap">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- 首页轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="banner in banners" :key="banner.id">
          <img :src="banner.picUrl" alt />
        </van-swipe-item>
      </van-swipe>
      <!-- /首页轮播图 -->

      <!-- 轮播图下面优势展示 -->
      <ul class="adv">
        <li>
          <van-icon class-prefix="icon" name="xuanzhong" size="14"></van-icon>
          <span>&nbsp;品牌鲜花网</span>
        </li>
        <li>
          <van-icon class-prefix="icon" name="xuanzhong" size="14"></van-icon>
          <span>&nbsp;实拍秀</span>
        </li>
        <li>
          <van-icon class-prefix="icon" name="xuanzhong" size="14"></van-icon>
          <span>&nbsp;1小时送达</span>
        </li>
        <li>
          <van-icon class-prefix="icon" name="xuanzhong" size="14"></van-icon>
          <span>&nbsp;50w+好评</span>
        </li>
      </ul>
      <!-- /轮播图下面优势展示  -->

      <!-- 宫格导航 -->
      <van-grid icon-size="30" :border="false" clickable>
        <van-grid-item
        v-for="cate in
        cates"
        :key="cate.id"
        :icon="cate.icon"
        :text="cate.name"
        :to="{
          path: '/listPages',
          query: {
            cateId: cate.id,
            cateName:cate.name
          }
        }"
        />
      </van-grid>
      <!-- /宫格导航 -->

      <!-- 一秒选花 -->
      <div class="choice">
        <p>&nbsp;&nbsp;一秒选花</p>
          <ul  class="choice-top">
            <li>
              <img src="@assets/images/imgNav1.png" alt="">
              <p>送恋人</p>
            </li>
            <li>
              <img src="@assets/images/imgNav2.png" alt="">
              <p>送长辈</p>
            </li>
            <li>
              <img src="@assets/images/imgNav3.png" alt="">
              <p>送亲友</p>
            </li>
          </ul>
        <ul class="choice-bottom">
          <li>
            <p>生日祝福</p>
            <img src="@assets/images/imgNav4.png" alt="">
          </li>
          <li>
            <p>求婚表白</p>
            <img src="@assets/images/imgNav5.png" alt="">
          </li>
          <li>
            <p>商务开业</p>
            <img src="@assets/images/imgNav6.png" alt="">
          </li>
          <li>
            <p>装饰绿植</p>
            <img src="@assets/images/imgNav7.png" alt="">
          </li>
        </ul>
      </div>
      <!-- /一秒选花 -->
      <!-- 商品推荐/爱情鲜花 -->
      <van-list v-model="loading"  :finished="finished"  finished-text="没有更多了"  @load="onLoad">
      <home-recommend @addCart="addCart" :items="recGoods" @clickGoods="enterDetails"></home-recommend>
      </van-list>
      <!-- /商品推荐/爱情鲜花 -->
      </van-pull-refresh>
    </div>
    <loading />
    <tabbar />
  </div>
</template>

<script>
import Tabbar from '@components/Tabbar.vue'
import HomeHead from '@views/Home/components/HomeHead'
import HomeRecommend from '@views/Home/components/HomeRecommend'
import { fetchCates, fetchHomeBanner, fetchRecGoods, addCart } from '@api'
import { isLogin } from '@utils'
import { Toast } from 'vant'
import loading from '@plugins/loading/loading.vue'
export default {
  name: 'home',
  components: {
    Tabbar,
    HomeHead,
    HomeRecommend,
    loading
  },
  data () {
    return {
      cates: [],
      banners: [],
      recGoods: [],
      isLoading: false,
      page: 0,
      pageSize: 5,
      loading: false,
      finished: false
    }
  },
  created () {
    this.fetchCates()
    this.fetchBanner()
  },
  methods: {
    addCart (id) {
      if (isLogin()) {
        addCart({
          goodsId: id,
          number: 1,
          // 正常情况下在请求头中加token，此接口特殊
          token: localStorage.getItem('token') || ''
        }).then(res => {
          if (res.data.code === 0) {
            this.$store.commit('cart/init_cart_info', {
              items: res.data.data.items,
              total: res.data.data.price
            })
            Toast({
              type: 'success',
              message: '加入成功',
              duration: 1000
            })
          }
        })
      } else {
        Toast({
          message: '请先登录',
          duration: 2000,
          onClose: () => {
            this.$router.push({
              path: '/login',
              query: {
                from: '/home'
              }
            })
          }
        })
      }
    },
    enterDetails (id) {
      this.$router.push({
        path: '/details',
        query: {
          id
        }
      })
    },
    onLoad () {
      this.page++
      this.fetchRecGoods()
    },
    onRefresh () {
      this.page = 1
      this.finished = false
      this.fetchRecGoods()
      this.recGoods = []
    },
    fetchRecGoods () {
      fetchRecGoods({
        page: this.page,
        pageSize: this.pageSize,
        categoryId: 72399
      }).then(res => {
        this.isLoading = false
        this.loading = false
        if (res.data.code === 0) {
          this.recGoods = [...this.recGoods, ...res.data.data.result]
        }
        if (res.data.code === 700) {
          this.finished = true
        }
      })
    },
    fetchCates () {
      fetchCates().then((res) => {
        if (res.data.code === 0) {
          this.cates = res.data.data.splice(0, 8)
        }
      })
    },
    fetchBanner () {
      fetchHomeBanner().then((res) => {
        if (res.data.code === 0) {
          this.banners = res.data.data
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  padding: 50px 0;
  .my-swipe {
    img {
      width: 100%;
      height: 190px;
    }
  }
  .adv{
    display: flex;
    padding: 7px 15px;
    justify-content: space-around;
    color:#555;
    font-size: 12px;
    background-color: #fff;
  }
  .choice{
    margin: 10px auto;
    padding: 10px 0 20px;
    font-size: 16px;
    font-weight: bold;
    color: #884e22;
    background-color: #fff;
    >p{
      border-left: 1px solid red;
      margin-left: 10px;
    }
    .choice-top{
      margin: 20px auto;
      display: flex;
      justify-content: space-evenly;
      >li{
        position: relative;
        img{
          width: 112px;
          height: 126px;
          border-radius: 5px;
        }
        >p{
          position: absolute;
          left: 0;
          bottom: -10px;
          border-radius: 0 0 5px 5px;
          height: 30px;
          width: 100%;
          line-height: 30px;
          text-align: center;
          font-size: 14px;
          font-weight: bold;
          color: #fff;
          background-color: rgb(255, 175, 178);
          }
        }
      }
    .choice-bottom{
      display: flex;
      justify-content: space-evenly;
      font-size: 14px;
      li{
        padding: 10px 8px;
        border-radius: 5px;
        background: rgb(243,235,227);
        text-align: center;
        >p{
          padding: 8px 0;
        }
        img{
          width: 68px;
          height: 68px;
        }
      }
    }
  }
}
</style>
